<template>
	<div class="body">
		<!-- 个人信息 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>个人信息</span>
			</div>
		</div> -->
		<div class="min">
			<div class="mymin">
				<div class="touxiang">
					<span>头像</span>
						<!-- <input type="file" class="hiddenInput" @change="upload" /> -->
					<!-- <input type="file" accept="image/*"  id="file"/> -->
					<!-- <van-uploader :after-read="afterRead" accept="image/*">
						<img :src="obj.avatar" alt="" />
						<img v-if="!obj.avatar" class="jt" src="../../assets/homeimg/滑动右.png" alt="" />
					</van-uploader> -->
					<el-upload
					class="avatar-uploade"
					:action="url+'/api/common/upload'"
					:on-success="handleAvatarSuccess">
					</el-upload>
					<div @click="uploadImg">
						<img v-if="img" :src="img" alt="" />
						<img v-else src="../../assets/homeimg/ava.png" alt="" />
					</div>
				</div>
				<div class="username" @click="editname">
					<span>用户名</span>
					<span>{{obj.nickname}}</span>
				</div>
				<div class="number" @click="editnumber">
					<span class="numname">手机号码</span>
					<span class="num">
						<span>
							{{obj.mobile}}
						</span>
						<img v-if="!obj.mobile" src="../../assets/homeimg/滑动右.png" />
					</span>
				</div>
				<div class="back"></div>
				<!-- <div class="number border">
					<span class="numname">微信绑定</span>
					<span class="num">
						<span>
							未绑定
						</span>
						<img src="../../assets/homeimg/滑动右.png" />
					</span>
				</div> -->
			</div>
		</div>
	</div>
</template>
<script>
	import mineApi from "@/api/mine";
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				token: '',
				// token: '84c3ba39-0b16-43c6-86da-c1c9e47cb44d',
				obj: {},
				headerImage: '',
				url:'',
				type: 1,//1安卓2ios
				img:'',//头像图片
				enter: false,
			};
		},
		computed: {

		},
		components: {
			// [Image.name]: Image
		},
		created() {
			window.getImage = this.getImage;
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// }
			// // this.token = info.token
			// this.token = this.$store.state.token
			this.url = this.$http.baseURL;
			// console.log();
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			}
			if(this.$route.query.imgUrl){
				this.enter = true;
				this.img = this.$route.query.imgUrl;
				this.saveImage()
			}
			this.getUserInfo(this.token)
		},
		mounted() {
			const u = navigator.userAgent;
			const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			if (isiOS) {
				this.type = 2;
				return "ios";
			} else {
				this.type = 1;
				return "andriod";
			}
		},
		methods: {
			// editAvatar() {
			// 	this.$el.querySelector('.hiddenInput').click()
			// },
			getImage(url){
				// Toast('成功了')
				this.img = url;
				this.saveImage();
			},
			uploadImg(){
				// console.log(document.querySelector('.el-upload__input'))
				if(this.type == 2){
					document.querySelector('.el-upload__input').click()
				}else{
					window.h5_android && window.h5_android.postImage();
				}
			},
			handleAvatarSuccess(res,file){
				this.img = res.data.url;
				this.saveImage()	
			},
			saveImage(url){
				this.$http.post('/api/user/profile',{nickname:this.obj.nickname,avatar:this.img}).then(res => {
					if(this.type == 1){
						window.h5_android && window.h5_android.saveStatus('1');
					}
					Toast.success('修改成功')
				})
			},
			getUserInfo(token) {
				this.$http.post('/api/user/userInfo').then(res => {
					this.obj = res.data;
					if(!this.enter){
						if(res.data.avatar. indexOf('https') == -1){
							this.img = res.data.avatar.replace(/http/g, 'https')
						}else{
							this.img = res.data.avatar
						}
					}
				})
				// mineApi.userInfo({
				// 	token
				// 	// token:'84c3ba39-0b16-43c6-86da-c1c9e47cb44d'
				// }).then(res => {
				// 	console.log(res);
				// 	this.obj = res.data;
				// 	localStorage.setItem('userInfo', JSON.stringify(this.obj));
				// })
			},
			afterRead(file) {
				console.log("file---->", file);
				let content = file.file;
				console.log(content);
				let formdata = new FormData();
				formdata.append("file", content);
				this.$http.post('/api/common/upload',{file:file}).then(res => {
					this.obj.avatar = res.data.url;
					this.changeAvator(res.data.url);
					this.getUserInfo();
				})
			},
			changeAvator(avatar) {
				this.$http.post('/api/user/profile',{avatar: avatar}).then(res => {
					console.log()
				})
				// mineApi.profile({
				// 	token: this.token,
				// 	avatar: avatar
				// }).then(res => {
				// 	this.$toast.success({
				// 		message: '111'
				// 	});
				// })
			},
			returnGo() {
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
				// this.$router.go(-1);
			},
			editname() {
				this.$router.push({path:'/myusername',query:{
					name:this.obj.nickname
				}});
			},
			editnumber() {
				this.$router.push({path:'/modify_num',query:{
					name:this.obj.nickname,
					phone:this.obj.mobile
				}})
			}
		}
	};
</script>
<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
	}

	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		border-bottom: 1px solid #dcdcdc;
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
    .avatar-uploade{
		display: none;
	}
	.touxiang {
		width: 100%;
		display: flex;
		height: 2.8125rem;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #dcdcdc;
		display: flex;
		justify-content: space-between;

		span:nth-of-type(1) {
			margin-left: 1rem;
		}
		div{
			height: calc(11vw - 2px);
			width:11vw;
			overflow: hidden;
			margin-right: 0.625rem;
		}
        img{
			// max-height: 2.5rem;
			height: 100%;
			width:11vw;
			border-radius:50%;
			// margin-right: 0.625rem;
			// margin-top: 2px;
			object-fit: cover;
			// flex-shrink: 0;
		}
		/deep/.van-uploader {
			// width: 0.625rem;
			height: 2.5rem;
			flex: 1;
			display: flex;
			justify-content: flex-end;
			margin-right: 1rem;

			.van-uploader__input-wrapper {
				// width: 0.625rem;
				height: 2.5rem;
				display: flex;
			}

			.van-button {
				width: 0.625rem;
				height: 1rem;
			}

			.van-button--small {
				min-width: 0.625rem;
				border: none;
			}

			
		}
		
		span:nth-of-type(2) {
			display: flex;
			align-items: center;
			margin-right: 1rem;
		}

		// img:nth-of-type(1) {
		// 	width: 2.5rem;
		// 	// height: 2.5rem;
		// 	max-height: 2.5rem;
		// 	margin-right: 0.625rem;
		// }

		#jt {
			width: 0.625rem;
			height: 1rem;
		}

		.hiddenInput {
			display: none;
		}
	}

	.username {
		height: 2.75rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #dedede;

		span {
			margin: 0 1rem;
		}
	}

	.number {
		display: flex;
		height: 2.75rem;
		align-items: center;
		justify-content: space-between;
		position: relative;
		border-bottom: 1px solid #dedede;

		.numname {
			margin-left: 0.875rem;
		}

		.num {

			// margin-right: 1.625rem;

			span {
				font-size: 0.75rem;
				color: #333333;
				height: 2.75rem;
				line-height: 2.75rem;
				margin-right: 1rem;
				text-align: right;
			}

			img {
				position: absolute;
				top: 0.875rem;
				right: 0.625rem;
				display: inline-block;
				width: 0.625rem;
				height: 1rem;
			}
		}
	}

	.back {
		width: 23.4375rem;
		height: 0.625rem;
		background: #f7f7fc;
	}

	.border {
		border-bottom: 1px solid #dcdcdc;
	}
</style>
